<template>
  <div class="scrollbar-wrapper">
    <el-tabs v-model="_pannelName" type="border-card" stretch>
        <el-tab-pane v-for="item in tabsList" :label="item.title" :name="item.id" :key="item.id">
          <el-scrollbar class="pannel-item">
            <component :is="item.component" v-bind="currSceneProps" v-on="updateListeners" v-if="item.component==='setting-audio-bg' || item.component==='sxc-weather'" />
            <component :is="item.component" v-bind="currSceneProps" v-else />
            
          </el-scrollbar>
        </el-tab-pane>
      </el-tabs>
  </div>
</template>

<script>
import { mapGetters, mapState, mapMutations } from 'vuex'
import sComponents from './settings/index'
import settingStyles1 from './settings/setting-styles1'
export default {
  components: {
    ...sComponents,settingStyles1
  },
  computed: {
    ...mapState('programs', ['currAttrPannelIndex']),
    ...mapGetters('programs', ['currElement', 'hasCurrElement', 'hasProps', 'currScene']),
    currSceneProps(){
      let propsArr;
      let list = [];
      if(this.currScene.elements){
          this.currScene.elements.forEach(item=>{
            if(item.elName==='sxc-audio'){
              for(let i=0; i<item.propsValue.bgAudioList.length; i++){
                list.push(item.propsValue.bgAudioList[i]);
              }
            }
          })
      }
      return {bgAudioList:list,backgroundImage:this.currScene.commonStyle.backgroundImage}
    },
    updateListeners() {
      return Object.assign({},
        this.$listeners,
        this.propsListener()
      )
    },
    _pannelName: {
      get () {
        return this.currAttrPannelIndex
      },
      set (val) {
        this.setCurrAttrPannelIndex(val)
      }
    },
    tabsList () {
      let res = []
      if (!this.hasCurrElement) {
        res.push({
          title: '场景背景',
          component: 'setting-scene-bg'
        })
        res.push({
          title: '背景音乐',
          component: 'setting-audio-bg'
        })
      } else {
        if(this.currElement.title!="图片" && this.currElement.title!="直播" && this.currElement.title!="网页" && this.currElement.title!="文档" && this.currElement.title!="视频" && this.currElement.title!="背景音乐"){
          res.push({
            title: '显示',
            component: 'setting-styles'
          })
        }
        if (this.hasProps) {
          res.unshift({
            title: this.currElement.title,
            component: 'setting-props'
          })
        }
        if(this.currElement.elName =="sxc-image"){
          res.push({
            title: '显示',
            component: 'settingStyles1'
          })
        }

        // 事件
        if (this.currElement.elName === 'sxc-button') {
          res.push({
            title: '事件',
            component: 'setting-event'
          })
        }
      }
      return res.map((item, idx) => {
        item.id = idx + ''
        return item
      })
    }
  },
  methods: {
    ...mapMutations('programs', ['setCurrAttrPannelIndex','updatePropValue','updatePropValues']),
    propsListener(val) {
      const vm = this
      let keyList = ['bgAudioList','play','citySelect']
      let _lis = {}
      keyList.forEach(item => {
        _lis['update:' + item] = (value) => {
          let _p = {}
          _p[item] = value
          vm.updatePropValues(_p)
        }
      })
      return _lis
    }
  }
}
</script>

<style lang="scss" scoped>
.scrollbar-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  .pannel-item {
    padding-right: 10px;
    overflow-x: hidden;
    position: relative;
    height: 100%;
  }
}
</style>
<style lang="scss">
.scrollbar-wrapper {
  .el-tabs--border-card {
    background: #f4f4f4;
  }
  .el-tabs {
    height: 100%;
    padding-bottom: 10px;
    .is-stretch {
      display: flex;
      flex-direction: row;
      width: 100%;
      .el-tabs__item {
        flex: 1;
        text-align: center;
        &.is-active {
          background: rgba(37, 165, 137, 0.09);
        }
      }
    }
  }
  .el-tabs__content {
    height: 100%;
    padding: 10px 0 10px 10px;
    height: calc(100%);
    & > div {
      height: 100%;
    }
  }
}
</style>
